<template>
  <div>
    <!-- table部分 -->
    <div class="mg-0_5em">
      <div class="w-100 mb-0_5em flex-container flex-row-left">
        <el-button type="primary" :icon="CirclePlus" @click="openRoleDialog()"> 添加角色 </el-button>
      </div>
      <el-table :data="roleList" border ref="tableRef" row-key="id" table-layout="auto">
        <el-table-column type="index" width="55" label="序号" />
        <el-table-column prop="roleCode" label="角色编码" align="center" />
        <el-table-column prop="roleName" label="角色名称" align="center" />
        <el-table-column prop="roleDesc" label="角色描述" align="center" min-width="300" />
        <el-table-column label="操作" align="center">
          <template #default="{ row }">
            <el-popover placement="right" width="280" trigger="hover" :popper-style="{ 'background-color': '#ecf5ff', 'border-color': 'white' }">
              <template #reference>
                <el-button type="primary" size="small" :icon="Setting"></el-button>
              </template>
              <div class="flex-container flex-row-center">
                <div class="ml-1em">
                  <el-button type="primary" size="small" :icon="Edit" @click="openRoleDialog(row)">修改 </el-button>
                </div>
                <div class="ml-1em">
                  <el-button type="primary" size="small" :icon="Key" @click="setAuth(row)">授权 </el-button>
                </div>
                <div class="ml-1em">
                  <el-popconfirm
                    confirm-button-text="确定"
                    cancel-button-text="取消"
                    :icon="Delete"
                    icon-color="red"
                    title="确定删除?"
                    @confirm="deleteRole(row.id)">
                    <template #reference>
                      <div>
                        <el-button type="danger" size="small" :icon="Delete">删除</el-button>
                      </div>
                    </template>
                  </el-popconfirm>
                </div>
              </div>
            </el-popover>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页部分 -->
    <div class="mr-0_5em mt-1em flex-container flex-row-right">
      <pagination ref="paginationRef" @change="initRoleList"></pagination>
    </div>

    <edit-role ref="editRoleRef" @success="initRoleList" />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { Delete, CirclePlus, Edit, Setting, Key } from '@element-plus/icons-vue'
import Pagination from '@/components/Pagination/index.vue'
import Role from '@/api/sys/role'
import EditRole from './components/EditRole.vue'

// 生命周期, 初始化数据
onMounted(() => {
  initRoleList()
})

/**
 * 角色数据
 */
const roleList = ref([])

// 分页组件
const paginationRef = ref()

/**
 * 初始化列表
 */
async function initRoleList(pageInfo) {
  if (!pageInfo) {
    pageInfo = { current: 1, size: 10, total: 0, condition: {} }
  }
  const { result } = await Role.page(pageInfo)
  const { total, records } = result
  roleList.value = records
  paginationRef.value.changeTotal(total, pageInfo.size)
}

// 编辑组件
const editRoleRef = ref()

/**
 * 打开弹框
 */
function openRoleDialog(role) {
  editRoleRef.value.switchDialog(role)
}

// 授权弹框
function setAuth(role) {
  editRoleRef.value.setAuth(role)
}

/**
 * 删除
 * @param id
 */
function deleteRole(id) {
  Role.delete(id).then(() => {
    initRoleList()
  })
}
</script>

<style lang="scss" scoped></style>
